<template>
    <div id="Home">
      <el-container style="height:100%">
        <!-- 侧边 -->
        <el-aside width="auto">
          <Aside></Aside>
        </el-aside>
        
        <el-container>
          <!-- 头部 -->
          <el-header class="el-header">
            <Header></Header>
          </el-header>

          <!-- 主体 -->
          <el-main>
            <router-view></router-view>
          </el-main>

        </el-container>

      </el-container>
    </div>
  </template>
  
  <script>
    export default {
      name: 'Main',
      components:{
        Aside:() => import('../components/Aside.vue'),
        Header:() => import('../components/Header.vue')
      },
    }
  </script>
  
  <style lang="less" scoped>
    #Home{
      height: 100%;
    }
    .el-header{
      height: 44px !important;
      background-color: rgb(41,41,41);
      text-align: center;
      line-height: 44px ;
    }
    
    .el-aside {
      background-color: #D3DCE6;
      color: #333;
      text-align: center;
      line-height: 200px;
      border: 0px;
      ul{
        height: 100%;
      }
    }
    
    .el-main{
      background-color: #E9EEF3;
      color: #333;
      text-align: center;
      line-height: 160px;
    }

    .el-menu{
      border: 0px;
    }
  </style>
  